import './index.css'
import { Link } from "react-router-dom";
// import Swiper from "swiper";
import "swiper/swiper-bundle.css";
import lb1 from "./img/bl1.jpg"
import lb2 from "./img/bl2.jpg"
import lb3 from "./img/bl3.jpg"
import lb4 from "./img/bl4.jpg"
import { Swiper,SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);

const Lbbom = () => {
    return  (
        <div className="lb">
            <Swiper
            spaceBetween={40}  // 每个图片间隔
            slidesPerView={4}//每页多少
            // navigation   //左右回退
            // pagination={{ clickable: true }} //分页
            // scrollbar={{ draggable: true }}  //滚动条
            onSwiper={(swiper) => console.log(swiper)}
            onSlideChange={() => console.log('slide change')}
            >
                <SwiperSlide>
                    <Link to="/Kyxxq" className="lb-bom" >
                        <img src={lb1}/>
                    </Link>
                    <p className="bt">天涯明月刀</p>
                </SwiperSlide>
                <SwiperSlide>
                    <a className="lb-bom">
                        <img src={lb2}/>
                    </a>
                    <p className="bt">天天酷跑</p>
                </SwiperSlide>
                <SwiperSlide>
                    <a className="lb-bom">
                        <img src={lb3}/>
                    </a>
                    <p className="bt">我的世界</p>
                </SwiperSlide>
                <SwiperSlide>
                    <a className="lb-bom">
                        <img src={lb4}/>
                    </a>
                    <p className="bt">王者荣耀</p>
                </SwiperSlide>
                <SwiperSlide>
                    <a className="lb-bom">
                        <img src={lb1}/>
                    </a>
                    <p className="bt">穿越火线</p>
                </SwiperSlide>
                <SwiperSlide>
                    <a className="lb-bom">
                        <img src={lb2}/>
                    </a>
                    <p className="bt">阴阳师</p>
                </SwiperSlide>
            </Swiper>
        </div>
    )
  };

  
export default Lbbom;